<template>
<div class="gradient-loading">
    <div class="logo">⚡</div>
</div>
</template>
<style scoped>
.gradient-loading {
width: 100%; height: 100%;
background: linear-gradient(-45deg, #3b82f6, #9333ea, #f43f5e, #f59e0b);
background-size: 400% 400%;
animation: gradientBG 6s ease infinite;
display: flex; align-items: center; justify-content: center;
}
.logo {
font-size: 48px;
color: white;
animation: pop 1.5s infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes pop {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.2); opacity: 1; }
}
</style>
  